<template>
  <el-tabs type="border-card">
    <el-tab-pane label="全部消息">
      <el-table
        :data="msgList"
        style="width: 100%">
        <el-table-column type="index" :index="1"></el-table-column>
        <el-table-column class-name="status-col" label="状态" align="center">
          <template  slot-scope="scope">
            <el-tag :type="scope.row.status | readStatusFilter">{{(scope.row.status==1)?'已读':'未读'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column v-for="(col, colIndex) in tableCols"
                         :key="col.prop"
                         :prop="col.prop"
                         :label="col.label"
                         :width="col.width">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="viewMsg(scope.row)" type="text" icon="el-icon-view" size="small" title="查看"></el-button>
            <el-button @click="deleteMsg(scope.row)" type="text" icon="el-icon-delete" size="small" style="color: red" title="删除"></el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-tab-pane>
  </el-tabs>
</template>

<script>
  import * as actionTypes from '../../constants/action-types';
    export default {
        name: 'Service',
        created(){
          this.fetchData();
        },
      filters:{
        readStatusFilter(status){
          if(status==1){
            return 'success';
          }

          return 'info';
        }
      },
        data() {
            return {
              loading: false,
              tableCols:[
                // 编号
                // 已/未读
                // 标题
                {prop:'title', label:'标题'},
                // 类型
                {prop:'type_text', label:'类型'},
                // 时间
                {prop:'recive_time', label:'时间'},
                // 操作
              ]
            }
        },
        computed:{
          msgList(){
            return this.$store.state.msgList;
          }
        },
        methods:{
          fetchData(){
            let me =this;
            me.loading=true;
            this.$store.dispatch(actionTypes.GET_MSG).then(()=>{
              me.loading=false
            }).catch(() => {
              me.loading=false
            })
          }
        }
    }
</script>

<style lang="stylus" scoped>
</style>
